<template>
  <div class="shisu">
    <div class="bander"></div>
    <div class="search">
      <div>请输入当前位置：</div>
      <el-input
        v-model="input1"
        style="width: 240px; margin-bottom: 20px"
        size="large"
        placeholder="请输入当前位置"
        :prefix-icon="Search"
      />
      <el-button type="primary" color="#049c39">查询</el-button>
    </div>
    <div class="content">
      <el-radio-group v-model="title" style="margin-bottom: 20px">
        <el-radio-button label="酒店" />
        <el-radio-button label="美食" />
      </el-radio-group>
      <div class="hotel" v-if="title === '酒店'">
        <el-card
          style="min-width: 800px; margin-bottom: 30px"
          v-for="item in hotelLists"
          :key="item.id"
        >
          <div class="item">
            <div class="left">
              <img :src="item.img" alt="" />
            </div>
            <div class="right">
              <span>名称：{{ item.name }}</span>
              <span>价格：{{ item.price }}</span>
              <span>面积：{{ item.scr }}</span>
              <span>评分：{{ item.score }}</span>
              <span>位置{{ item.location }}</span>
              <el-button type="primary" color="#049c39">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </div>
      <div class="eat" v-else>
        <el-card
          v-for="item in eatLists"
          :key="item.id"
          style="margin-bottom: 30px"
        >
          <div class="item">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="middle">
              <div>名称：{{ item.name }}</div>
              <div>评分：{{ item.score }}分</div>
            </div>
            、
            <div class="middle">
              <el-rate
                v-model="item.score"
                disabled
                show-score
                text-color="#ff9900"
                score-template=""
              />
              <el-button>查看</el-button>
            </div>
          </div>
        </el-card>
      </div>
      <el-pagination
        v-model:current-page="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[4, 10, 20, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script lang="js" setup>
import { ref , reactive} from "vue";
// title
const title = ref('酒店')
const hotelLists = reactive([
  {
  id: 1,
  name: 'pppp',
  location: '青城山成都东软学院',
  price: '300~1800/元',
  scr: '18平',
  score: '4.5分',
  img: require('../../assets/shisu/h-1.jpg')
  },
  {
  id: 2,
  name: 'pppp',
  location: '青城山成都东软学院',
  price: '300~1800/元',
  scr: '18平',
  score: '4.5分',
  img: require('../../assets/shisu/h-2.jpg')
  },
  {
  id: 3,
  name: 'pppp',
  location: '青城山成都东软学院',
  price: '300~1800/元',
  scr: '18平',
  score: '4.5分',
  img: require('../../assets/shisu/h-3.jpg')
  },
  {
  id: 4,
  name: 'pppp',
  location: '青城山成都东软学院',
  price: '300~1800/元',
  scr: '18平',
  score: '4.5分',
  img: require('../../assets/shisu/h-4.jpg')
  },
])
const eatLists = reactive([
{
  id: 1,
  name: 'pppp',
  score: 4.5,
  img: require('../../assets/shisu/e-1.jpg')
  },
  {
  id: 2,
  name: 'pppp',
  score: 3,
  img: require('../../assets/shisu/e-2.png')
  },
  {
  id: 3,
  name: 'pppp',
  score: 4.5,
  img: require('../../assets/shisu/e-3.jpg')
  },
  {
  id: 4,
  name: 'pppp',
  score: 4.5,
  img: require('../../assets/shisu/e-4.jpg')
  },
])
const currentPage2 = ref(1)
const pageSize2 = ref(4)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>
<style lang="less" scoped>
.shisu {
  .bander {
    height: 400px;
    background-image: url(../../assets/shisu/banner_shusu.jpg);
    background-size: cover;
    margin-bottom: 30px;
  }
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
  }
  .content {
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    .hotel {
      .item {
        display: flex;
        margin-bottom: 30px;

        .left {
          width: 400px;
          height: 200px;
          margin-right: 30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          span {
            display: block;
            margin-bottom: 10px;
          }
        }
      }
    }
    .eat {
      display: grid;
      justify-content: center;
      align-items: center;
      grid-template-columns: repeat(4, auto);
      grid-gap: 20px;
      .img {
        width: 100%;
        height: 150px;
        margin-right: 30px;
        margin-bottom: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .middle {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

/deep/.el-radio-button .el-radio-button__inner {
  width: 600px;
}
/deep/.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background-color: #049c39;
}
</style>
